{% from "dropdown-menu.njk" import dropdown_menu %}

<section id="breadcrumb"  class="w-full rounded-lg border scroll-mt-14">
  <header class="border-b px-4 py-3 flex items-center justify-between">
    <h2 class="text-sm font-medium">Breadcrumb</h2>
    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
      {% lucide "book-open", { "class": "size-4" }   %}
    </a>
  </header>
  <div class="p-4">
    <ol class="text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5">
      <li class="inline-flex items-center gap-1.5">
        <a href="#" class="hover:text-foreground transition-colors">Home</a>
      </li>
      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
      <li class="inline-flex items-center gap-1.5">
        {% set trigger %}
          {% lucide "ellipsis" %}
        {% endset %}
        {{ dropdown_menu(
          id="demo-breadcrumb-menu",
          trigger=trigger,
          trigger_attrs={"class": "flex size-9 items-center justify-center h-4 w-4 hover:text-foreground cursor-pointer"},
          popover_attrs={"class": "p-1"},
          items=[
            { label: "Documentation" },
            { label: "Themes" },
            { label: "GitHub" }
          ]
        ) }}
      </li>
      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
      <li class="inline-flex items-center gap-1.5">
        <a href="#" class="hover:text-foreground transition-colors">Components</a>
      </li>
      <li>{% lucide "chevron-right", { "class": "size-3.5" } %}</li>
      <li class="inline-flex items-center gap-1.5">
        <span class="text-foreground font-normal">Breadcrumb</span>
      </li>
    </ol>
  </div>
</section>